<template>
  <el-card v-loading="loading" class="box-card box-card-list" style="margin-bottom: 20px;">
    <div class="companyData">
      <!-- <div class="logoWarp">
        <div v-if="companyData.logoInfo" class="lazyImg" style="padding:0;border: 1px solid #eee;">
          <img :src="companyData.logoInfo" style="width: 100%;">
        </div>
        <div v-else class="lazyImg">
          {{ companyData.companyName | filterText }}
        </div>
      </div> -->
      <div class="content" style="max-width: unset;">
        <div class="header">
          <h1 class="name">{{ gpBaseData.name == undefined ? '' : gpBaseData.name }}
            <el-link type="primary" style="display: inline-block;margin-left: 5px;" :underline="false" @click="editForm">
              {{ $t('编辑信息') }}
            </el-link>
          </h1>
        </div>
        <el-row class="detail" :gutter="20">
          <el-col :span="8">
            <span class="label">{{ $t('管理人全称') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.name">{{ gpBaseData.name == undefined ? '' : gpBaseData.name }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('管理人简称') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.shortName">{{ gpBaseData.shortName == undefined ? '' : gpBaseData.shortName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('是否完成基金业协会登记') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.isConsortiumRegistry">{{ gpBaseData.isConsortiumRegistry == undefined ? '' : isConsortiumRegistryFormat(gpBaseData.isConsortiumRegistry) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金业协会登记日期') }}：</span>
            <span class="link-hover-click">{{ gpBaseData.dateRegistration === undefined ? '' : renderTime(gpBaseData.dateRegistration) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('基金业协会登记编号') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.associationNumber">{{ gpBaseData.associationNumber == undefined ? '' : $t(gpBaseData.associationNumber) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('企业统一社会信用代码') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.unifiedSocialCreditCode">{{ gpBaseData.unifiedSocialCreditCode == undefined ? '' : $t(gpBaseData.unifiedSocialCreditCode) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('法人代表') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.legalRepresentative">{{ gpBaseData.legalRepresentative == undefined ? '' : $t(gpBaseData.legalRepresentative) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('法人代表证件类型') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.documentType">{{ gpBaseData.documentType == undefined ? '' : $t(gpBaseData.documentType) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('法人代表证件编号') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.certificateNo">{{ gpBaseData.certificateNo == undefined ? '' : $t(gpBaseData.certificateNo) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('成立时间') }}：</span>
            <span class="link-hover-click">{{ gpBaseData.timeEstablishment === undefined ? '' : renderTime(gpBaseData.timeEstablishment) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('机构企业性质') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.natureEnterprise">{{ gpBaseData.natureEnterprise == undefined ? '' : natureEnterpriseFormat(gpBaseData.natureEnterprise) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('机构类型') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.organizationType">{{ gpBaseData.organizationType == undefined ? '' : organizationTypeFormat(gpBaseData.organizationType) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('机构组织形式') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.organizationForm">{{ gpBaseData.organizationForm == undefined ? '' : organizationFormFormat(gpBaseData.organizationForm) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('联系人') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.contacts">{{ gpBaseData.contacts == undefined ? '' : $t(gpBaseData.contacts) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('联系人职务') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.contactPerson">{{ gpBaseData.contactPerson == undefined ? '' : $t(gpBaseData.contactPerson) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('联系人电话') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.contactPhone">{{ gpBaseData.contactPhone == undefined ? '' : $t(gpBaseData.contactPhone) }}</span>
          </el-col>
          <el-col :span="8">
            <span class="label">{{ $t('联系人邮箱') }}：</span>
            <span class="link-hover-click" :title="gpBaseData.contactEmail">{{ gpBaseData.contactEmail == undefined ? '' : $t(gpBaseData.contactEmail) }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 添加或修改公司基本信息对话框 -->
    <el-dialog :title="$t('公司基本信息')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <gpBaseForm ref="gpBaseForm" />
    </el-dialog>
  </el-card>
</template>

<script>
    import { getGpBase } from '@/api/fund/gp/gpBase'
    import gpBaseForm from '@/views/fund/gpBase/gpBaseForm'
    export default {
      components: {
        gpBaseForm
      },
        data() {
            return {
                gpBaseData: {},
                formOpen: false,
                loading: false,
                // 管理人类型字典
                typeOptions: [],
                // 是否完成基金业协会登记字典
                isConsortiumRegistryOptions: [],
                // 机构企业性质字典
                natureEnterpriseOptions: [],
                // 机构类型字典
                organizationTypeOptions: [],
                // 机构组织形式字典
                organizationFormOptions: []
            }
        },
        created() {
            this.getDicts('fund_manger_type').then(response => {
                this.typeOptions = response.data
            })
            this.getDicts('sys_yes_no').then(response => {
                this.isConsortiumRegistryOptions = response.data
            })
            this.getDicts('manager_enterprise_nature').then(response => {
                this.natureEnterpriseOptions = response.data
            })
            this.getDicts('manager_type').then(response => {
                this.organizationTypeOptions = response.data
            })
            this.getDicts('manager_organizational form').then(response => {
                this.organizationFormOptions = response.data
            })
        },
      mounted() {
        this.init()
      },
      methods: {
        // 初始化数据
        init() {
          this.loading = true
          getGpBase(this.$route.query.gpId).then(response => {
            console.log(response.data)
            this.gpBaseData = response.data
            this.loading = false
          })
        },
        // 管理人类型字典翻译
        typeFormat(row, column) {
          console.log(column)
          return this.selectDictLabel(this.typeOptions, row.type)
        },
        // 是否完成基金业协会登记日期日期字典翻译
        isConsortiumRegistryFormat(value) {
          return this.selectDictLabel(this.isConsortiumRegistryOptions, value)
        },
        // 机构企业性质字典翻译
        natureEnterpriseFormat(value) {
          return this.selectDictLabel(this.natureEnterpriseOptions, value)
        },
        // 机构类型字典翻译
        organizationTypeFormat(value) {
          return this.selectDictLabel(this.organizationTypeOptions, value)
        },
        // 机构组织形式字典翻译
        organizationFormFormat(value) {
          return this.selectDictLabel(this.organizationFormOptions, value)
        },
        renderTime(date) {
          var dateTemp = new Date(date).toJSON()
          return new Date(+new Date(dateTemp) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').substr(0, 10)
        },
        editForm() {
          this.formOpen = true
          this.$nextTick(() => {
            this.$refs.gpBaseForm.init(this.$route.query)
          })
        }
      }

    }
</script>
<style lang="scss" scoped>
.custom{
  background-color: #f6f7fb !important;
}
</style>
